<template>
  <view elevation="5px" class="console-top-statistics-box">
    <view v-for="(item, index) in data" :key="index" class="statistics-item">
      <view class="statistics-value">
        <text>{{ item.value }}</text>
      </view>
      <view class="statistics-label">
        <text>{{ item.label }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default() {
        return [
          {
            label: "新增会员",
            value: 20
          },
          {
            label: "订单数",
            value: 20
          },
          {
            label: "单笔均价",
            value: 20
          }
        ];
      }
    }
  },
  data() {
    return {};
  }
};
</script>

<style scoped lang="scss">
.console-top-statistics-box {
  display: flex;
  justify-content: space-between;
  padding: 36rpx 0;
  background-color: #ffffff;
  overflow: hidden;
  border-radius: $uni-border-radius-lg;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .statistics-item {
    flex-grow: 1;
    border-right: 1px solid #efefef;
    display: flex;
    flex-direction: column;
    align-items: center;
    &:last-child {
      border-right: 0;
    }
    .statistics-value {
      font-size: 36rpx;
    }
    .statistics-label {
      color: $uni-text-color-grey;
    }
  }
}
</style>
